import { mapGetters } from "vuex";
import { mapActions } from "vuex";
import { themeList , addCss, removeAllCss, getReadTimeByMinute } from './book'
import { saveLocation } from '../utils/localStorage'
export const ebookMixin = { 
    computed: { 
        ...mapGetters([ 
            'fileName',
            'currentBook',
            'menuVisible',
            'settingVisible',
            'defaultFontSize',
            'fontFamilyVisible',//字体选择的弹出框
            'defaultFontFamily',
            'defaultTheme',
            'bookAvailable',
            'progress',
            'section',
            'navigation'
        ]),
        themeList() { //得到主题样式列表
            return themeList(this) //this代表vue实例
        }
    },
    methods: { 
        ...mapActions([
            'setFileName',
            'setCurrentBook',
            'setMenuVisible',
            'setSettingVisible',
            'setDefaultFontSize',
            'setFontFamilyVisible',
            'setDefaultFontFamily',
            'setDefaultTheme',
            'setBookAvailable',
            'setProgress',
            'setSection',
            'setNavigation'
        ]),
        initGlobalStyle() { //初始化全局样式
            removeAllCss()
            // 下面的功能是用来更改菜单栏和标题栏背景色，电子书的背景主题由自己改变
            // 因为菜单栏和标题栏背景色是动态引入的，而菜单栏标题栏自带的背景色是早就写死在文件中的
            // 所以由内部样式表和外部样式表的优先级关系，越后引入的样式优先级更高,最后显示的样式是我们的外部引入head中样式
            switch(this.defaultTheme) { //通过天剑link的方法增加样式
                case 'Default':
                    //addCss引入的是Nginx的中的样式，其实已经对应好了菜单和主题中各标签名及其样式，并且加了!important,所以优先级其实就是最高的了
                    addCss(`${process.env.VUE_APP_RES_URL}`+'/theme/theme_default.css')
                    break;
                case 'Eye': 
                    addCss(`${process.env.VUE_APP_RES_URL}`+'/theme/theme_eye.css')
                    break;
                case 'Gold': 
                    addCss(`${process.env.VUE_APP_RES_URL}`+'/theme/theme_gold.css')
                     break;
                case 'Night': 
                    addCss(`${process.env.VUE_APP_RES_URL}`+'/theme/theme_night.css')
                    break;
                default:
                    addCss(`${process.env.VUE_APP_RES_URL}`+'/theme/theme_default.css')
                    break;
            }
        },
        refreshLocation() { //更新当前位置，并保存到LocalStorage
            const currentLocation = this.currentBook.rendition.currentLocation()
            // 通过cfi获取进度，这一点很重要
            if (currentLocation && currentLocation.start) {
                const startCfi = currentLocation.start.cfi
                const progress = this.currentBook.locations.percentageFromCfi(startCfi)
                console.log('progress',progress)
                this.setProgress(Math.floor(progress * 100))//设置进度条进度跟随章节变化
                this.setSection(currentLocation.start.index)//设置章节
                saveLocation(this.fileName,startCfi)
            }
        },
        display(target,cb) {//通用的display方法
            if(target) {
                this.currentBook.rendition.display(target).then(() => {
                    this.refreshLocation() //执行完刷新当前位置
                    if (cb) cb() //如果还要做别的事情，传入回调函数
                })
            } else {
                 this.currentBook.rendition.display().then(() => {
                     this.refreshLocation()
                     if (cb) cb()
                 })
            }
        },
        getReadTimeText() {//获取时间并替换掉国际化中预先准备好被替换的'$1'
            return this.$t('book.haveRead').replace('$1',getReadTimeByMinute(this.fileName))
        },
        hideTitleAndMenu() { //隐藏菜单和设置
            this.setMenuVisible(false)
            this.setSettingVisible(-1)
            this.setFontFamilyVisible(false)
        }
    }
}